<template>
  <div>
    <!-- 内容 -->
    <div class="main_report">
      <!-- 单课程 -->
      <div class="single">
        <div class="single_top">
          <!-- 左边 -->
          <div class="top_left">
            <div class="ai_video_container">
              <div class="video_title">视频</div>
              <div class="single_video_header">
                <div class="header_title">
                  <span class="class_text"
                    >{{ dataInfo.course_info.subject_name }} <span class="course_time">{{ dataInfo.course_info.course_name_time }}</span>
                  </span>
                  <span>{{ dataInfo.course_info.class_name }} <span class="teacher_text">教师：</span>{{ dataInfo.course_info.teacher_name }}</span>
                </div>

                <div class="box_container">
                  <div class="header_box attend">
                    <div class="img"></div>
                    <div class="box_tip">
                      <span class="box_sum">{{ dataInfo.course_info.all_num }}/{{ dataInfo.course_info.reality_num }}</span>
                      <span>应到/出席</span>
                    </div>
                  </div>

                  <div class="header_box late">
                    <div class="img"></div>
                    <div class="box_tip">
                      <span class="box_sum">{{ dataInfo.course_info.late_num }}</span>
                      <span>迟到</span>
                    </div>
                  </div>

                  <div class="header_box leave">
                    <div class="img"></div>
                    <div class="box_tip">
                      <span class="box_sum">{{ dataInfo.course_info.leave_num }}</span>
                      <span>请假</span>
                    </div>
                  </div>

                  <div class="header_box early">
                    <div class="img"></div>
                    <div class="box_tip">
                      <span class="box_sum">{{ dataInfo.course_info.early_num }}</span>
                      <span>早退</span>
                    </div>
                  </div>

                  <div class="header_box absence">
                    <div class="img"></div>
                    <div class="box_tip">
                      <span class="box_sum">{{ dataInfo.course_info.lack_num }}</span>
                      <span>缺勤</span>
                    </div>
                  </div>
                </div>
              </div>

              <VideoPlayer id="signle" :url="dataInfo.course_info.video_list[0].play_url" :video-list="dataInfo.course_info.video_list" :marker="dataInfo.video_info_point" />
            </div>

            <div class="left_echart">
              <span class="teacher_title">教师行为分析</span>

              <div class="left_container">
                <!-- 行为分析 -->
                <div class="teacher_analysis">
                  <div class="echart_title">教学行为分析</div>

                  <!-- 教学行为分析 -->

                  <Behavior
                    :line-style="{
                      marginLeft: '60px'
                    }"
                    :footer-data="dataInfo.teacher_behavior.teaching_behavior_duration"
                    :option="behaviorOptions"
                    :is-show-footer="true"
                    width="100%"
                    height="135px"
                  />
                </div>

                <!-- 轨迹 -->
                <div class="teacher_trajectory">
                  <div class="trajectory_title">教师行为轨迹</div>
                  <Scatter :scatter-data="scatterData" class="trajectory" id="singleScatter" width="240px" height="135px" color="#1E5C85" />

                  <div class="analysis_data">
                    <div class="data_body">
                      <div class="data_title">
                        <span class="num">{{ formatTime(dataInfo.teacher_behavior.teaching_trajectory_duration.podium) }}</span
                        ><span>分钟</span>
                      </div>
                      <span>讲台时长</span>
                    </div>

                    <div class="data_body">
                      <div class="data_title">
                        <span class="num">{{ formatTime(dataInfo.teacher_behavior.teaching_trajectory_duration.trajectory) }}</span
                        ><span>分钟</span>
                      </div>
                      <span>巡视时长</span>
                    </div>

                    <div class="data_body">
                      <div class="data_title">
                        <span class="num">{{ dataInfo.teacher_behavior.teaching_trajectory_duration.trajectory_times }}</span
                        ><span>次</span>
                      </div>
                      <span>巡视次数</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右边 -->
          <div class="top_right">
            <div class="course_title">课堂</div>
            <div class="top_container">
              <!-- 右 -->
              <div class="right_header">
                <div class="score">
                  <div class="score_echart">
                    <ScorePie :score="dataInfo.suggest.course_score" width="170px" height="170px" />
                  </div>
                  <div class="ai_text" style="flex: 1">
                    <span class="text_bold">AI课程建议：</span>
                    <span class="sug_text">
                      {{ dataInfo.suggest.ai_suggest }}
                    </span>
                  </div>
                </div>

                <!-- 课堂分配时间 -->
                <div class="ai_text">
                  <span class="text_bold">课堂时间分配</span>
                  <ThreePie :allocation-time="dataInfo.time_allocation" height="153px" />
                </div>

                <!-- ST图 -->
                <div class="ai_text">
                  <span class="text_bold">课堂S-T曲线</span>
                  <div class="echart_tip_text">S-T曲线即代表在不同时间段教师和学生行为的占比,线段更靠近S,即代表该时间学生活动占比较高,线段越靠近T,即代表该时间教师活动占比更多</div>
                  <StEchart :x-data="st_x_data" :x-max="x_max" :y-max="y_max" :origin-data="originSTData" id="singleSt" height="180px" />
                </div>
              </div>

              <!-- 左 -->
              <div class="right_header">
                <!-- 总结 -->
                <div class="ai_text">
                  <div class="summarize_box">
                    <span class="text_bold">教学反思总结：</span>
                    <span class="summarize_edit" @click="handleEdit">编辑</span>
                  </div>
                  <el-input @blur="handleBlur" ref="editRef" class="summarize" type="textarea" :disabled="!isEdit" :rows="2" placeholder="" v-model="reflect_info"> </el-input>
                </div>

                <!-- 专注度 -->
                <div class="ai_text attention">
                  <span class="text_bold">课堂专注度</span>
                  <div class="ai_pie">
                    <div class="pie_box">
                      <Pie height="124px" width="130px" id="1122" title="112" :value="focusFormat(dataInfo.focus.participation_rate)" color="#1978E5" />
                      <span>参与率</span>
                    </div>

                    <div class="pie_box">
                      <Pie height="124px" width="130px" id="1" title="112" :value="focusFormat(dataInfo.focus.head_up_rate)" color="#1978E5" />
                      <span>抬头率</span>
                    </div>

                    <div class="pie_box">
                      <Pie height="124px" width="130px" id="3" title="112" :value="focusFormat(dataInfo.focus.head_down_rate)" color="#1978E5" />
                      <span>低头率</span>
                    </div>
                  </div>
                </div>

                <!-- rt-ch -->
                <div class="ai_text">
                  <span class="text_bold">RT-CH曲线</span>
                  <div class="echart_tip_text">Rt 值越高，表明课堂中教师活动越多。Ch 值越高，说明课堂中师生的对话与互动就越多。</div>
                  <ChEchart line-color="#00D5FF" :origin-point="originPoint" id="singleCh" height="180px" />
                </div>
              </div>
            </div>

            <div class="right_echart">
              <span class="teacher_title">学生行为分析</span>

              <div class="left_container">
                <!-- 行为分析 -->
                <div class="teacher_analysis">
                  <div class="echart_title">学生行为分析</div>

                  <Behavior :option="behaviorStuOptions" :is-show-footer="false" width="100%" height="200px" />
                </div>

                <!-- 轨迹 -->
                <div class="teacher_trajectory">
                  <div class="trajectory_title">学生课堂表现</div>

                  <div class="focus_text">
                    学生专注度均值：<span>{{ dataInfo.student_behavior.show.average }}</span>
                  </div>
                  <div class="right_focus">
                    <div class="focus_box">
                      <span>注意力集中阶段</span>
                      <span>{{ dataInfo.student_behavior.show.focus.describe }}</span>
                    </div>

                    <div class="focus_box">
                      <span>注意力涣散阶段</span>
                      <span>{{ dataInfo.student_behavior.show.slack.describe }}</span>
                    </div>

                    <div class="focus_box">
                      <span>学生活跃度分析</span>
                      <span>{{ dataInfo.student_behavior.show.active.exciting.describe }}</span>
                      <span>{{ dataInfo.student_behavior.show.active.low.describe }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "echarts-gl";
import * as echarts from "echarts";
import VideoPlayer from "./video-player.vue";
import Behavior from "../echart/behavior.vue";
import StEchart from "../echart/st.vue";
import ChEchart from "../echart/ch.vue";
import Pie from "../echart/pie.vue";
import ThreePie from "../echart/three-pie.vue";
import ScorePie from "../echart/score.vue";
import Scatter from "../echart/scatter.vue";

const enumExpression = {
  0: "愤怒",
  1: "厌恶",
  2: "恐惧",
  3: "快乐",
  4: "中性",
  5: "悲伤",
  6: "惊喜"
};

const enumStuAction = {
  1: "讨论时长",
  3: "阅读时长",
  5: "演示时长",
  7: "实践时长",
  9: "听讲时长"
};

const enumStuActionKey = {
  1: "discuss",
  3: "read",
  5: "demonstrate",
  7: "practice",
  9: "listen"
};

const enumTeaAction = {
  1: "教室巡视",
  3: "师生互动",
  5: "书写板书",
  7: "指导学生",
  9: "教师讲授"
};
const enumTeaActionKey = {
  1: "tour",
  3: "interaction",
  5: "blackboard",
  7: "guidance",
  9: "teach"
};

export default {
  props: {
    courseId: {
      type: Number,
      default: 0
    },
    dataInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      originSTData: {}, //  st图Data
      x_max: 0,
      y_max: 0,
      st_x_data: [],
      originPoint: {}, // ch图
      infoOriginSTValue: [], // st图
      behaviorOptions: {}, // 教师行为
      behaviorStuOptions: {}, // 学生行为
      scatterData: [], //散点图数据
      isEdit: false, // 编辑反思总结
      reflect_info: "" // 反思总结
    };
  },
  components: {
    VideoPlayer,
    Behavior,
    StEchart,
    ChEchart,
    Pie,
    ThreePie,
    ScorePie,
    Scatter
  },
  computed: {
    formatTimeHours() {
      return (seconds) => {
        if (seconds !== "undefined") {
          let hours = Math.floor(seconds / 3600);
          let minutes = Math.floor((seconds % 3600) / 60);
          let remainingSeconds = seconds % 60;

          // 添加前导零
          hours = hours < 10 ? "0" + hours : hours;
          minutes = minutes < 10 ? "0" + minutes : minutes;
          remainingSeconds = remainingSeconds < 10 ? "0" + remainingSeconds : remainingSeconds;

          return hours + ":" + minutes + ":" + remainingSeconds;
        } else {
          return "00:00:00";
        }
      };
    },

    // 专注度百分比格式化
    focusFormat() {
      return (value) => {
        return parseFloat(value) || 0;
      };
    },

    // 格式化秒为分钟
    formatTime() {
      return (value) => {
        if (value !== "undefined") {
          const minutes = value / 60;
          return minutes.toFixed(1);
        } else {
          return 0;
        }
      };
    }
  },
  watch: {
    dataInfo() {
      this.init();
    }
  },
  methods: {
    init() {
      this.transStData();
      this.transRTChData();
      this.transBehaviorData();
      this.transTrajectoryData();
      this.transStuBehaviorData();
      this.reflect_info = this.$props.dataInfo.reflect_info;
    },

    // 封装获取的数据
    setJsonData(name1, name2, name3, name4, name5, infoData, teaching_behavior) {
      teaching_behavior[name5] = [];
      infoData[name5].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name5][i] = "1";
        }
      });

      // 实践 guidance
      teaching_behavior[name4] = [];
      infoData[name4].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name4][i] = "1";
        }
      });

      // 演示 blackboard
      teaching_behavior[name3] = [];
      infoData[name3].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name3][i] = "1";
        }
      });

      // 阅读 interaction
      teaching_behavior[name2] = [];
      infoData[name2].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name2][i] = "1";
        }
      });

      // 讨论 tour
      teaching_behavior[name1] = [];
      infoData[name1].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name1][i] = "1";
        }
      });
      let num1 = teaching_behavior[name5].length;
      let num2 = teaching_behavior[name4].length;
      let num3 = teaching_behavior[name3].length;
      let num4 = teaching_behavior[name2].length;
      let num5 = teaching_behavior[name1].length;
      let max = num1;
      if (num2 > max) {
        max = num2;
      }

      if (num3 > max) {
        max = num3;
      }

      if (num4 > max) {
        max = num4;
      }

      if (num5 > max) {
        max = num5;
      }
      if (max > num1 && num1 != 0) {
        for (let i = teaching_behavior[name5].length; i < max; i++) {
          teaching_behavior[name5][i] = "0";
        }
      }
      if (max > num2 && num2 != 0) {
        for (let i = teaching_behavior[name4].length; i < max; i++) {
          teaching_behavior[name4][i] = "0";
        }
      }
      if (max > num3 && num3 != 0) {
        for (let i = teaching_behavior[name3].length; i < max; i++) {
          teaching_behavior[name3][i] = "0";
        }
      }
      if (max > num4 && num4 != 0) {
        for (let i = teaching_behavior[name2].length; i < max; i++) {
          teaching_behavior[name2][i] = "0";
        }
      }
      if (max > num5 && num5 != 0) {
        for (let i = teaching_behavior[name1].length; i < max; i++) {
          teaching_behavior[name1][i] = "0";
        }
      }
    },

    // 转换st数据
    transStData() {
      const { st_value } = this.$props.dataInfo;
      // for (const key in st_value) {
      //   this.infoOriginSTValue.push(st_value[key]);
      // }

      const originSTData = {
        name: "课堂2",
        type: "line",
        step: "end",
        lineStyle: {
          color: "#3DE2FF"
        },
        itemStyle: {
          color: "rgb(33,148,246)",
          borderWidth: 1,
          borderColor: "#3DE2FF"
        },
        data: st_value.y
      };
      this.st_x_data = st_value.x;
      this.originSTData = originSTData;
      // this.max = this.infoOriginSTValue[this.infoOriginSTValue.length - 1];
      this.x_max = st_value.x[st_value.x.length - 1];
      this.y_max = st_value.y[st_value.y.length - 1];
    },

    // 转换rt-ch数据
    transRTChData() {
      const originPoint = {
        type: "effectScatter",
        symbolSize: 8,
        data: [],
        color: "#08fcff"
      };
      const rtData = [];
      const { rt_ch_value } = this.$props.dataInfo;
      for (const key in rt_ch_value) {
        rtData.push(rt_ch_value[key]);
      }
      originPoint.data.push(rtData);

      this.originPoint = originPoint;
    },

    // 转换 教师行为分析数据
    transBehaviorData() {
      let teaching_behavior = this.$props.dataInfo.teacher_behavior.teaching_behavior || [];
      const keys = ["tour", "interaction", "blackboard", "guidance", "teach"];
      const yAxisText = ["教室巡视", "", "师生互动", "", "书写板书", "", "指导学生", "", "教师讲授"];
      const dataValue = [];
      const infoData = this.$props.dataInfo.teacher_behavior.teaching_behavior_source || {};
      const interval = parseInt(this.$props.dataInfo.course_info.video_time / 5);

      this.setJsonData("tour", "interaction", "blackboard", "guidance", "teach", infoData, teaching_behavior);
      for (let i = 0; i < 9; i += 2) {
        for (let j = 0; j < teaching_behavior[keys[i / 2]].length; j++) {
          const key = keys[i / 2];
          const value = parseInt(teaching_behavior[key][j]) ? i + 1 : 0;
          dataValue.push([i, j, value]);
        }
      }

      const minuteXaxis = [];
      for (let i = 1; i < this.$props.dataInfo.course_info.video_time; i++) {
        minuteXaxis.push(i);
      }

      const data = dataValue.map((item) => [item[1], item[0], item[2] || "-"]);

      this.behaviorOptions = {
        grid: {
          left: "2%",
          right: "4%",
          bottom: "-2%",
          top: "1%",
          containLabel: true
        },

        tooltip: {
          show: true,
          formatter: (obj) => {
            const hoverItem = infoData[enumTeaActionKey[obj.data[2]]].find((item) => {
              if (item.Start < obj.data[0] && obj.data[0] < item.End) {
                return item;
              }
            });
            // 后端数据返回分间隔但是又是连续的 需要特殊处理

            if (hoverItem) {
              return `${enumTeaAction[obj.data[2]]}: ${this.formatTimeHours(hoverItem.End - hoverItem.Start)}`;
            } else {
              return "";
            }
          }
        },
        xAxis: {
          show: true,
          type: "category",
          data: minuteXaxis,
          splitArea: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#D7DBE0",
              borderType: [5, 10],
              borderDashOffset: 5
            }
          },
          axisLabel: {
            fontSize: 12,
            margin: 15,
            interval: (index, value) => {
              if (this.$props.dataInfo.course_info.video_time === Number(value) + 1) {
                return true;
              }

              if (index % interval === 0) {
                return true;
              }
            },
            formatter: (value) => {
              return `${this.formatTimeHours(value)}`;
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: yAxisText,
          splitArea: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ccc"
            }
          },
          axisTick: {
            show: false
          }
        },
        visualMap: {
          type: "piecewise",
          hoverLink: false,
          min: 0,
          max: 10,
          orient: "horizontal",
          itemGap: 0,
          precision: 2,
          padding: 5,
          borderWidth: 1,
          borderColor: "none",

          show: false,

          pieces: [
            {
              gt: 0,
              lte: 1,
              color: "#cbe21a"
            },
            {
              gt: 1,
              lte: 3,
              color: "#15c136"
            },
            {
              gt: 3,
              lte: 5,
              color: "#6849ff"
            },
            {
              gt: 5,
              lte: 7,
              color: "#16c9ba"
            },
            {
              gt: 7,
              lte: 9,
              color: "#1978e5"
            }
          ],
          outOfRange: {
            color: "#999"
          }
        },
        series: [
          {
            type: "heatmap",
            data: data,
            label: {
              show: false
            },

            itemStyle: {
              borderWidth: 0,
              borderColor: "#FFFFFF"
            },

            emphasis: {
              itemStyle: {
                shadowOffsetY: 2,
                shadowBlur: 6,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    },

    //转换 行为轨迹数
    transTrajectoryData() {
      const { teaching_trajectory } = this.$props.dataInfo.teacher_behavior;
      const data = [];

      for (let i = 0; i < teaching_trajectory.x.length; i++) {
        data.push([parseFloat(teaching_trajectory.x[i]), parseFloat(teaching_trajectory.y[i])]);
      }

      this.scatterData = data;
    },

    // 转换 学生行为分析数据
    transStuBehaviorData() {
      const { expression } = this.$props.dataInfo.student_behavior;

      let studying_behavior = this.$props.dataInfo.student_behavior.studying_behavior || [];
      const keys = ["discuss", "read", "demonstrate", "practice", "listen"];
      const yAxisText = ["情绪", "", "讨论", "", "阅读", "", "演示", "", "实践", "", "听讲"];
      const dataValue = [];
      const infoData = this.$props.dataInfo.student_behavior.studying_behavior_source || {};
      const tooltipData = this.handleContinuous(infoData);

      this.setJsonData("discuss", "read", "demonstrate", "practice", "listen", infoData, studying_behavior);
      for (let i = 2; i < 11; i += 2) {
        for (let j = 0; j < studying_behavior[keys[(i - 2) / 2]].length; j++) {
          const key = keys[(i - 2) / 2];
          const value = parseInt(studying_behavior[key][j]) ? i - 1 : 0;
          dataValue.push([i, j, value]);
        }
      }

      const minuteXaxis = [];
      for (let i = 1; i < this.$props.dataInfo.course_info.video_time; i++) {
        minuteXaxis.push(i);
      }
      const emotionMinuteXaxis = expression.expression_value.map((item, index) => index);

      const data = dataValue.map((item) => [item[1], item[0], item[2] || "-"]);

      // 情绪折线
      const emotionValue = expression.expression_value.map((item) => parseInt(item));

      // 情绪表情包
      const expressionData = this.handleExpressionData();
      const interval = parseInt(this.$props.dataInfo.course_info.video_time / 5);
      this.behaviorStuOptions = {
        grid: {
          left: "2%",
          right: "3%",
          bottom: "0%",
          top: "-7%",
          containLabel: true
        },
        tooltip: {
          show: true,
          formatter: (obj) => {
            if (obj.componentSubType === "scatter") {
              return enumExpression[obj.data[2]];
            } else {
              const hoverItem = infoData[enumStuActionKey[obj.data[2]]].find((item) => {
                if (item.Start < obj.data[0] && obj.data[0] < item.End) {
                  return item;
                }
              });

              // 后端数据返回分间隔但是又是连续的 需要特殊处理
              if (tooltipData[enumStuActionKey[obj.data[2]]]) {
                return `${enumStuAction[obj.data[2]]}: ${this.formatTimeHours(tooltipData[enumStuActionKey[obj.data[2]]])}`;
              }
              if (hoverItem) {
                return `${enumStuAction[obj.data[2]]}: ${this.formatTimeHours(hoverItem.End - hoverItem.Start)}`;
              } else {
                return "";
              }
            }
          }
        },
        xAxis: [
          {
            show: true,
            type: "category",
            data: minuteXaxis,
            splitArea: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#D7DBE0",
                borderType: [5, 10],
                borderDashOffset: 5
              }
            },
            axisLabel: {
              fontSize: 12,
              margin: 20,
              interval: (index, value) => {
                console.info(index, value);
                if (this.$props.dataInfo.course_info.video_time === Number(value) + 1) {
                  return true;
                }

                if (index % interval === 0) {
                  return true;
                }
              },
              formatter: (value) => {
                console.info(value);
                return `${this.formatTimeHours(value)}`;
              }
            },
            axisTick: {
              show: false
            }
          },
          {
            show: false,
            type: "category",
            data: emotionMinuteXaxis,
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#D7DBE0",
                borderType: [5, 10],
                borderDashOffset: 5
              }
            },
            axisLabel: {
              color: "#666666"
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "category",
            data: yAxisText,
            splitArea: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#ccc"
              }
            },
            axisTick: {
              show: false
            }
          },
          // 折线图y轴
          {
            show: false,
            type: "value",
            position: "top",
            max: 40, // value的最大值
            axisLine: {
              // 坐标轴线
              show: true,
              lineStyle: {
                color: "#fff"
              }
            },

            splitLine: {
              show: false
            }
          }
        ],
        visualMap: {
          type: "piecewise",
          hoverLink: false,
          min: 0,
          max: 10,
          orient: "horizontal",
          itemGap: 0,
          precision: 2,
          padding: 5,
          borderWidth: 1,
          borderColor: "none",

          show: false,
          pieces: [
            {
              gt: 0,
              lte: 1,
              color: "#cbe21a"
            },
            {
              gt: 1,
              lte: 3,
              color: "#15c136"
            },
            {
              gt: 3,
              lte: 5,
              color: "#6849ff"
            },
            {
              gt: 5,
              lte: 7,
              color: "#16c9ba"
            },
            {
              gt: 7,
              lte: 9,
              color: "#1978e5"
            }
          ],
          outOfRange: {
            color: "#999"
          }
        },
        series: [
          // 折线图
          {
            type: "line",
            emphasis: {
              focus: "series"
            },
            smooth: true,
            data: emotionValue,

            lineStyle: {
              width: 2, // 设置折线宽度为 4
              color: "#00FCFC"
            },
            areaStyle: {
              // 区域填充样式
              normal: {
                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: "rgba(0, 255, 255, 0.30)" },
                    { offset: 1, color: "rgba(0, 255, 255, 0)" }
                  ],
                  false
                )
              }
            },
            symbol: function (data, itemOptions, seriesType, seriesName) {
              return "none";
            },

            xAxisIndex: 1, // 使用第二个 x 轴
            yAxisIndex: 1 // 使用第二个 x 轴
          },

          // 散点情绪图
          {
            symbolSize: 15,
            data: expressionData,

            symbol: function (data, itemOptions, seriesType, seriesName) {
              // 自定义符号样式
              let symbolEmo = "";
              switch (data[2]) {
                case 0: // 愤怒
                  symbolEmo =
                    "image://";
                  break;
                case 1: // 厌恶
                  symbolEmo =
                    "image://";
                  break;
                case 2: // 恐惧
                  symbolEmo =
                    "image://";
                  break;
                case 3: //  快乐
                  symbolEmo =
                    "image://";
                  break;
                case 4: // 中性
                  symbolEmo =
                    "image://";
                  break;
                case 5: // 悲伤
                  symbolEmo =
                    "image://";
                  break;
                case 6: // 惊喜
                  symbolEmo =
                    "image://";
                  break;
              }

              return symbolEmo;
            },

            xAxisIndex: 1, // 使用第一个 x 轴
            yAxisIndex: 1, // 使用第二个 x 轴
            type: "scatter"
          },

          // 不连续柱状图
          {
            type: "heatmap",
            data: data,
            label: {
              show: false
            },

            itemStyle: {
              borderWidth: 0,
              borderColor: "#FFFFFF"
            },

            emphasis: {
              itemStyle: {
                shadowOffsetY: 2,
                shadowBlur: 6,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    },

    // 全部是否连续
    handleContinuous(dataObj) {
      const continuousData = {};
      for (const key in dataObj) {
        let sum = 0;
        for (let i = 0; i < dataObj[key].length; i++) {
          if (dataObj[key][i + 1] && (dataObj[key][i].End === dataObj[key][i + 1].Start || dataObj[key][i].End === dataObj[key][i + 1].Start - 1)) {
            sum += dataObj[key][i].End - dataObj[key][i].Start;
            continuousData[key] = sum;
          } else if (!dataObj[key][i + 1]) {
          } else {
            break;
          }
        }
      }

      return continuousData;
    },

    // 编辑
    handleEdit() {
      this.isEdit = true;

      this.$nextTick(() => {
        this.$refs.editRef.focus();
      });
    },

    // 失去焦点
    handleBlur() {
      this.isEdit = false;
      const success = (res) => {
        const { status, msg } = res;
        if (status === "success") {
          this.$message.success("编辑成功");
          this.$emit("refresh", { id: this.$props.courseId });
        } else {
          this.$message.error(msg);
        }
      };

      const fail = (err) => {
        this.$message.error(err);
      };
      const params = {
        course_id: this.$props.courseId,
        reflect_info: this.reflect_info
      };
      this.$ajax.put("api/ainew/videoReflect", params, {
        func: { success: success, fail: fail }
      });
    },

    // 处理情绪表情包数据
    handleExpressionData() {
      const { expression_value } = this.dataInfo.student_behavior.expression;
      return expression_value.reduce((acc, curr, index) => {
        if (index !== 0 && curr !== expression_value[index - 1]) {
          acc.push([index - 1, 2, parseInt(expression_value[index - 1])]);
        }
        // 最后有连续
        if (index === expression_value.length - 1 && curr === expression_value[index - 1]) {
          acc.push([index - 1, 2, parseInt(expression_value[index - 1])]);
        } else if (index === expression_value.length - 1 && curr !== expression_value[index - 1]) {
          // 最后没连续 只有单个
          acc.push([index, 2, parseInt(curr)]);
        }
        return acc;
      }, []);
    }
  },
  mounted() {
    if (Object.keys(this.$props.dataInfo).length) this.init();
  }
};
</script>
<style lang="scss" scoped>
.main_report {
  // background-color: #011f39;
  height: 100%;
  padding: 15px 25px;

  .single {
    .single_top {
      display: flex;

      .top_left {
        width: 50%;

        .ai_video_container {
          background: url("../../../assets/images/ai/ai-video.png") no-repeat;
          position: relative;
          padding: 0 45px;

          .video_title {
            position: absolute;
            left: 715px;
            top: 18px;
            font-size: 20px;
            color: #fff;
          }

          .single_video_header {
            box-sizing: border-box;
            display: flex;
            width: 100%;
            padding-top: 70px;
            margin-bottom: 17px;
            // background-color: #f2f2f2;
            color: #fff;

            .header_title {
              width: 280px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              border-radius: 10px;
              padding: 10px;
              display: flex;
              flex-direction: column;
              font-size: 18px;
              font-weight: 500;
              justify-content: space-around;

              background: linear-gradient(270deg, rgba(1, 135, 191, 0.3) 0%, rgba(1, 135, 191, 0.11) 100%);

              .class_text {
                margin-bottom: 15px;
                font-size: 22px;

                .course_time {
                  display: inline-block;

                  height: 13px;
                  font-size: 18px;
                  color: #66ffff;
                }
              }

              .teacher_text {
                margin-left: 15px;
              }
            }

            .box_container {
              display: flex;
              flex: 1;
              justify-content: space-evenly;

              .header_box {
                display: flex;
                border-radius: 10px;
                padding: 0 5px;

                .img {
                  width: 50px;
                  height: 70px;
                }

                .box_tip {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  align-items: center;

                  span {
                    font-size: 16px;
                  }

                  .box_sum {
                    font-size: 24px;
                    font-weight: 500;
                    margin-top: 10px;
                  }
                }
              }

              .attend {
                background: url("../../../assets/images/ai/attend.png") no-repeat;
              }

              .late {
                background: url("../../../assets/images/ai/late.png") no-repeat;
              }

              .leave {
                background: url("../../../assets/images/ai/leave.png") no-repeat;
              }

              .early {
                background: url("../../../assets/images/ai/early.png") no-repeat;
              }
              .absence {
                background: url("../../../assets/images/ai/absence.png") no-repeat;
              }
            }
          }
        }

        .left_echart {
          display: flex;
          flex-direction: column;
          position: relative;
          width: 100%;

          .teacher_title {
            color: #fff;
            font-size: 20px;
            width: 100%;
            background: url("../../../assets/images/ai/teacher-title.png") no-repeat;
            padding: 13px 0;
            padding-left: 22px;
          }

          .teacher_analysis {
            position: relative;
            flex: 1;
            border-left: 1px solid;
            border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;

            .echart_title {
              margin-top: 15px;
              margin-bottom: 10px;
              padding: 10px 0;
              padding-left: 45px;
              font-size: 17px;
              color: #d8f0ff;
              background: url("../../../assets/images/ai/data-header.png") no-repeat;
              width: 100%;
            }
          }

          .teacher_trajectory {
            position: relative;
            width: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border-right: 1px solid;
            border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;

            .trajectory_title {
              box-sizing: border-box;
              padding: 10px 0;
              padding-left: 45px;
              font-size: 17px;
              color: #d8f0ff;
              background: url("../../../assets/images/ai/data-header.png") no-repeat;
              width: 100%;
              margin-top: 15px;
              margin-bottom: 5px;
            }
          }
        }
      }

      .top_right {
        position: relative;
        width: 50%;
        box-sizing: border-box;
        margin-left: 10px;
        // background-color: #f2f2f2;
        padding: 0px 20px 0 15px;

        .top_container {
          display: flex;
          padding: 70px 20px 10px;
          background: url("../../../assets/images/ai/suggest.png") no-repeat;

          .right_header {
            display: flex;
            flex-direction: column;
            margin-right: 10px;

            .score {
              display: flex;

              .score_echart {
                width: 170px;
                height: 130px;
              }
            }

            .ai_text {
              color: #d8f0ff;
              display: flex;
              flex-direction: column;
              margin-left: 10px;

              .text_bold {
                background: url("../../../assets/images/ai/data-header.png") no-repeat;
                font-size: 17px;
                font-weight: 500;
                margin-bottom: 5px;
                padding: 10px 0;
                padding-left: 45px;
              }

              .summarize_box {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .summarize_edit {
                  cursor: pointer;
                }
              }

              .ai_pie {
                display: flex;

                .pie_box {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                }
              }

              .echart_tip_text {
                color: rgba(216, 240, 255, 0.6);
                line-height: 17px;
              }

              .sug_text {
                font-size: 12px;
                margin-bottom: 10px;
                line-height: normal;
                background: #13366e;
                padding: 0 2px;
                padding-top: 5px;
                height: 80px;
                overflow: auto;
              }

              .summarize {
                height: 80px !important;
                padding: 3px;
                border-radius: 5px;
                padding-top: 5px;
                width: 100%;
                border: 1px solid #6666665e;
                background: #13366e;
                overflow: hidden;
                overflow-y: scroll;
                line-height: normal;
                margin-bottom: 7px;

                /deep/ .el-textarea__inner {
                  padding: 0 !important;
                  height: 80px !important;
                  resize: none !important;
                  border: none;
                  color: #fff;
                  background: #13366e;
                }
              }
            }

            .attention {
              margin-bottom: 15px;
            }
          }

          .test_ref {
            width: 800px;
            height: 600px;
          }
        }

        .course_title {
          position: absolute;
          top: 18px;
          left: 200px;
          font-size: 20px;
          color: #fff;
        }
      }
    }

    .single_bottom {
      display: flex;
    }
  }
}

/deep/ .el-textarea {
  &.is-disabled {
    .el-textarea__inner {
      cursor: auto !important;
    }
  }
}

.analysis_data {
  display: flex;
  justify-content: space-evenly;
  background: linear-gradient(180deg, rgba(19, 69, 116, 0.3) 0%, #134574 100%);
  border-radius: 6px;
  padding: 10px 20px;
  width: 310px;
  margin-top: 15px;

  .data_body {
    display: flex;
    flex-direction: column;
    color: #ccc;

    .data_title {
      display: flex;
      align-items: center;

      .num {
        font-size: 20px;
        height: 20px;
        font-weight: bold;
      }
    }
  }
}

.right_echart {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  margin-top: 7px;

  .teacher_title {
    color: #fff;
    font-size: 20px;

    width: 100%;
    background: url("../../../assets/images/ai/teacher-title.png") no-repeat;
    padding: 13px 0;
    padding-left: 22px;
  }

  .teacher_analysis {
    position: relative;
    flex: 1;
    border-left: 1px solid;
    border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;

    .echart_title {
      padding: 10px 0;
      padding-left: 45px;
      font-size: 17px;
      color: #d8f0ff;
      margin-top: 15px;
      margin-bottom: 5px;
      background: url("../../../assets/images/ai/data-header.png") no-repeat;
      width: 100%;
    }
  }

  .teacher_trajectory {
    position: relative;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    border-right: 1px solid;
    border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;

    .trajectory_title {
      padding: 10px 0;
      padding-left: 45px;
      font-size: 17px;
      color: #d8f0ff;
      background: url("../../../assets/images/ai/data-header.png") no-repeat;
      width: 100%;
      margin-top: 15px;
      margin-bottom: 5px;
    }

    .focus_text {
      color: #fff;

      span {
        color: #fc831a;
      }
    }

    .right_focus {
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      height: 100%;

      .focus_box {
        display: flex;
        flex-direction: column;

        border-radius: 8px;
        padding: 7px;
        background-color: #263d67;
        color: rgba(216, 240, 255, 0.6);

        span {
          margin-bottom: 5px;
        }
      }
    }
  }
}

.left_container {
  display: flex;
}
</style>
